<template>
    <a-card
        class="general-card"
        :title="$t('jia-ye-fen-xi')"
        :header-style="{ paddingBottom: '12px' }"
    >
        <a-grid :cols="24" :col-gap="12" :row-gap="12">
            <a-grid-item
                :span="{ xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 }"
            >
                <div class="section-title">{{ $t('jia-zhu') }}</div>
                <div class="flex">
                    <charts
                        :option="pieOptions"
                        :loading="loading"
                        style="width: 50%; height: 280px"
                    ></charts>
                    <a-table
                        :loading="loading"
                        :columns="fuelTableConfig.columns"
                        :data="fuelTableConfig.data"
                        :pagination="false"
                    >
                    </a-table>
                </div>
            </a-grid-item>
            <a-grid-item
                :span="{ xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 }"
            >
                <div class="section-title">{{ $t('jia-zhu-qiang') }}</div>
                <a-table
                    :loading="gunTableConfig.loading"
                    :columns="gunTableConfig.columns"
                    :data="gunTableConfig.data"
                    :pagination="false"
                >
                </a-table>
            </a-grid-item>
        </a-grid>
    </a-card>
</template>

<script lang="ts" setup>
    import { ref, watch, reactive } from 'vue';
    import { useI18n } from 'vue-i18n';
    import useLoading from '@/hooks/loading';
    import Charts from '@/components/echarts/index.vue';
    import { getPieData, getGunList } from '../service';

    const { t } = useI18n();

    const { loading, setLoading } = useLoading();
    const renderData = ref<any[]>([]);
    const fuelTableConfig = reactive({
        data: [],
        columns: [
            {
                title: t('ran-liao'),
                dataIndex: 'fuelName',
            },
            {
                title: t('ding-dan-liang'),
                dataIndex: 'orderNum',
            },
            {
                title: t('jia-zhu-liang'),
                dataIndex: 'volume',
            },
            {
                title: t('xiao-shou-e'),
                dataIndex: 'amount',
            },
        ],
    });
    const gunTableConfig = reactive({
        data: [],
        loading: false,
        columns: [
            {
                title: t('qiang-hao'),
                dataIndex: 'gunNo',
            },
            {
                title: t('ran-liao'),
                dataIndex: 'fuelName',
            },
            {
                title: t('ding-dan-liang'),
                dataIndex: 'orderNum',
            },
            {
                title: t('jia-zhu-liang'),
                dataIndex: 'totalVolume',
            },
        ],
    });
    async function loadTableData() {
        try {
            gunTableConfig.loading = true;
            const data = await getGunList();
            gunTableConfig.data = data.result || [];
        } finally {
            gunTableConfig.loading = false;
        }
    }

    function getPieOptions(data: any[]) {
        const totalAmount = data.reduce(
            (acc, item) => acc + Number(item.value),
            0
        );
        return {
            title: {
                text: t('zong-jia-zhu-liang'),
                subtext: `¥ ${totalAmount}`,
                left: 'center',
                top: 'center',
            },
            grid: {
                left: 20,
            },
            legend: {
                show: true,
                bottom: 'bottom',
                orient: 'horizontal',
                icon: 'shape',
                itemWidth: 12,
                itemHeight: 12,
                textStyle: {
                    color: '#4E5969',
                },
                formatter(name: string) {
                    const target = data.find((item) => item.name === name);
                    return `${name} ${target?.value} 占比 ${target?.ratio}%`;
                },
            },
            tooltip: {
                show: true,
            },
            series: [
                {
                    name: t('jia-zhu-fen-bu'),
                    type: 'pie',
                    radius: ['55%', '75%'],
                    label: {
                        show: false,
                    },
                    data,
                },
            ],
        };
    }
    const pieOptions = ref(getPieOptions(renderData.value));

    watch(
        () => renderData.value,
        () => {
            pieOptions.value = getPieOptions(renderData.value);
        },
        { immediate: true }
    );

    async function load() {
        try {
            setLoading(true);
            const data: any = await getPieData();
            fuelTableConfig.data = data.result?.consumeList || [];
            renderData.value = (data.result?.consumeList || []).map((item) => {
                return {
                    name: item.fuelName,
                    value: item.volume,
                    ratio: item.ratio,
                };
            });
        } finally {
            setLoading(false);
        }
    }
    load();
    loadTableData();
</script>

<style lang="less" scoped>
    .section-title {
        display: flex;
        align-items: center;
        color: #000;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;

        &::before {
            display: block;
            width: 3px;
            height: 14px;
            margin-right: 8px;
            background-color: rgb(var(--primary-6));
            content: '';
        }
    }
</style>
